<script setup>
import { ref, onMounted,defineEmits,defineProps,defineModel  } from 'vue';
import { message } from 'ant-design-vue';
import { resumeInfoStore } from "@/stores/modules/resume.js";
import { getResumeFile } from "@/api/file.js";
import { EyeOutlined } from '@ant-design/icons-vue';
import PdfPreview from "@/components/PdfPreview.vue";

const fileList = ref([]);
const previewUrl = ref('');
const pdfPreviewRef = ref(null);
const fileType = ref('');
const selectedItem = ref(null);  // 存储当前选中的项

// 获取文件列表数据
onMounted(async () => {
  await updateResume();
});

const props = defineProps({
  open: {
    type: Boolean,
    required: true,
  },
})

const emit = defineEmits(['pdf-sent','update:open'])

// 文件点击预览
const onResumeInfo = async (file) => {
  try {
    pdfPreviewRef.value.togglePreview()
    fileType.value = 'pdf';
    previewUrl.value = file.filePath
  } catch (error) {
    message.error('文件预览失败: ' + error.message);
  }
};

const updateResume = async () => {
  try {
    const res = await getResumeFile();
    if (res.data.code === 200) {
      resumeInfoStore().setResumeInfo(res.data.data);
      fileList.value = resumeInfoStore().resumeInfo;
    } else {
      message.error(res.data.message);
    }
  } catch (e) {
    message.error('出错了');
  }
};

// 选择简历操作
const selectResume = (file) => {
  if (selectedItem.value === file) {
    selectedItem.value = null;  // 如果点击的是已选中的项，则取消选择
    message.info(`已取消选择简历：${file.fileName}`);
  } else {
    selectedItem.value = file;  // 设置为当前选择的项
    message.success(`已选择简历：${file.fileName}`);
  }
};

// 发送简历消息
const handleSendMessage =  () => {
  if(!selectedItem.value) return message.error('请选择需要发送的简历')
  emit("update:open", false); // 关闭弹框
  emit('pdf-sent', JSON.stringify(selectedItem.value))
  selectedItem.value = null
};
</script>

<template>
  <a-modal title="选择简历" :open="open" @ok="handleSendMessage" ok-text="发送" cancel-text="取消" @cancel="emit('update:open', false)">
    <a-list
        :data-source="fileList"
        bordered
        item-layout="horizontal"
    >
      <template #renderItem="{ item }">
        <a-list-item
            :class="{'selected-item': selectedItem === item}"
        >
          <a-list-item-meta :title="item.fileName" />
          <template #extra>
            <a-button-group>
              <a-button type="primary" @click="onResumeInfo(item)">
                <EyeOutlined />
                预览
              </a-button>
              <a-button type="default" @click="selectResume(item)">
                选择
              </a-button>
            </a-button-group>
          </template>
        </a-list-item>
      </template>
    </a-list>
    <a-empty v-if="fileList.length === 0">暂无附件简历</a-empty>
    <PdfPreview ref="pdfPreviewRef" :preview-url="previewUrl" :file-type="fileType"/>
  </a-modal>
</template>

<style scoped>
/* 简历列表样式 */
a-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

a-button {
  margin-left: 10px;
}

/* 设置选中项的背景色 */
.selected-item {
  background-color: #e6f7ff; /* 淡蓝色背景 */
}

</style>
